{extend name='base'/}
{block name='content'}
<link href="__STATIC__/admin/ueditor/themes/default/css/ueditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="__STATIC__/admin/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/admin/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="__STATIC__/admin/ueditor/lang/zh-cn/zh-cn.js"></script>
<ol class="breadcrumb" style="background-color: #f9f9f9;padding:8px 0;margin-bottom:10px;">
    <li>
        <a href=""><i class="fa fa-cogs"></i>
            文章管理</a>
    </li>
    <li class="active">
        <a href="">文章添加</a>
    </li>
</ol>
<ul class="nav nav-tabs" role="tablist">
    <li><a href="{:url('index')}">文章管理</a></li>
    <li class="active"><a href="">文章添加</a></li>
</ul>
<form class="form-horizontal" id="form"  action="" method="post">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">文章管理</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">文章标题</label>
                <div class="col-sm-9">
                    <input type="text" name="arc_title"  class="form-control" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">文章作者</label>
                <div class="col-sm-9">
                    <input type="text" name="arc_author"  class="form-control" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">文章排序</label>
                <div class="col-sm-9">
                    <input type="number" name="arc_sort"  class="form-control" placeholder="" value="100">
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">所属分类</label>
                <div class="col-sm-9">
                    <select class="js-example-basic-single form-control" name="cate_id">
                        <option value="0">请选择分类</option>
                        {foreach name='cateData' item='vo'}
                            <option value="{$vo['cate_id']}">
                                {for start="0" end="$vo['level']"}
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                {/for}
                                {$vo['cate_name']}
                            </option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">标签</label>
                <div class="col-sm-9">
                    {foreach name='tagData' item='vo'}
                    <label class="checkbox-inline" style="margin-right:10px;margin-left:0px;">
                        <input type="checkbox" name="tag[]" value="{$vo['tag_id']}"> {$vo['tag_name']}
                    </label>
                    {/foreach}
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">缩略图</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="arc_thumb_input" class="form-control hidden" readonly="" value="" onchange="showPreview(this)">
                        <input type="text" class="form-control hidden" id="attachment_id" name="attachment_id"/>
                        <input type="text" class="form-control" id="arc_thumb_text" name="arc_thumb" readonly/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" onclick="selectImg()">
                                <span class="glyphicon glyphicon-folder-open"></span> 选择图片
                            </button>
                        </span>
                    </div>
                    <div class="input-group" id="arc_thumbs" style="margin-top:5px;">
                        <img src="" id="arc_thumb" class="img-responsive img-rounded" width="150">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label"></label>
                <div class="col-sm-9">
                    <button class="btn btn-success" id="upload_arc_thumb" type="button" onclick="uploadImg()" disabled>
                        <span class="glyphicon glyphicon-upload"></span> 上传
                    </button>
                    <button class="btn btn-danger" id="remove_arc_thumb" type="button"  onclick="removeImg()">
                        <span class="glyphicon glyphicon-remove"></span> 移除
                    </button>
                </div>
            </div>
            <div class="form-group">
                <label for="" class="col-sm-2 control-label">文章摘要</label>
                <div class="col-sm-9">
                    <textarea type="text" name="arc_digest"  class="form-control" placeholder="文章摘要"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label for=""  class="col-sm-2 control-label">文章内容</label>
                <div class="col-sm-9">
                    <script id="container" name="arc_content" type="text/plain" style="height:300px;width:100%;"></script>
                </div>
            </div>
        </div>
    </div>
    <button class="btn btn-primary" type="submit">确定</button>
</form>
<script>
    var ue = UE.getEditor('container'); //初始化编辑器

    //显示预览图
    function showPreview(source) {
        if(!source.value) {
            removeImg();
            return;
        }else {
            document.getElementById("upload_arc_thumb").classList.remove("disabled");  //取消禁用移除
            document.getElementById("upload_arc_thumb").removeAttribute("disabled");  //取消禁用移除
            document.getElementById("arc_thumb_text").value = document.getElementById("arc_thumb_input").value; //text显示
        }
        var file= source.files[0];
        if(window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
                document.getElementById("arc_thumb").src = e.target.result;
            }
            fr.readAsDataURL(file);
        }
    }

    //选中按钮时选中input
    function selectImg() {
        document.getElementById("arc_thumb_input").click();
    }

    //移除图片
    function removeImg() {
        document.getElementById("arc_thumb").src="";
        document.getElementById("upload_arc_thumb").classList.add("disabled");
        document.getElementById("upload_arc_thumb").setAttribute("disabled",true);
        document.getElementById("arc_thumb_input").value = "";
        document.getElementById("arc_thumb_text").value = "";
    }

    //上传图片
    function uploadImg() {
        var fileObj=$("#arc_thumb_input")[0].files[0];
        var formData=new FormData();
        formData.append('file',fileObj);
        $.ajax({
            url:"/system/component/uploader",
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                if(data.data.attachment_id) {
                    document.getElementById("attachment_id").value = data.data.attachment_id;
                }
                //执行成功
                swal({
                    title:"上传图片",
                    text:data.msg,
                    type:"success"
                });
            },
            error:function(xhr,data) {
                swal({
                    title:"上传图片",
                    text:data.msg,
                    type:"error"
                });
            }
        })
    }
</script>
{/block}